<template>
  <div id="mt_selector">
    <ul>
      <li v-for="(li, index) in lis" :key="index">
        <span 
          :class="{active: active===index}"
          @click="handleClick(index)" >{{li.selectedTitle}}</span>
      </li>
    </ul>
    <div class="mt-s-content">
      <ul v-show="active===0||active===3" class="mt-s-normal">
        <li :class="{active: lis[0].activeOptions === index}"
          v-for="(option, index) in currentOptions"
          :key="index"
          @click="changeTimeOrder(index)">{{option.title}}</li>
      </ul>
      <fishes-selector
        v-show="active===1"
        @showLoading="showLoading"
        @stopLoading="stopLoading"
        @changeFish="changeFish"
        :fish="currentFish"></fishes-selector>
      <citys-selector
        v-show="active === 2"
        @showLoading="showLoading"
        @stopLoading="stopLoading"
        @changeCity="changeCity"
        :city="currentCity"></citys-selector>
      <div class="mt-s-screen" 
        :class="{active: spread === 1}" 
        @click="fold"></div>
    </div>
    <div class="mt-s-loading" v-if="loading">
      <spinner class="mt-s-spinner"></spinner>
    </div>
  </div>
</template>

<script>
import { Spinner } from "vux"
import CitysSelector from "./Citys.vue"
import FishesSelector from "./Fishes.vue"

export default {
  data() {
    return {
      lis: [
        {
          selectedTitle: "最新发布",
          type: 0, //0: options, 1: all fishes, 2: citys
          options: [
            { title: "最新发布" },
            { title: "数量由低到高" },
            { title: "数量由高到低" }
          ],
          activeOptions: 0
        },
        { selectedTitle: "全部水产", type: 1 },
        { selectedTitle: "全国", type: 2 }
        // {
        //   selectedTitle: "供应",
        //   type: 0,
        //   options: [{ title: "供应" }, { title: "求购" }],
        //   activeOptions: 0
        // }
      ],
      currentOptions: [],
      type: -1,
      active: -1,
      spread: 0,
      screenActive: 0,
      currentCity: {
        id: 0,
        name: "全国",
        level: 2,
        upid: 0
      },
      currentFish: {
        id: 0,
        name: "全部鱼种"
      },
      loading: 0
    }
  },
  methods: {
    toggleScreen(display) {
      if (display === undefined) {
        this.screenActive === 1
          ? (this.screenActive = 0)
          : (this.screenActive = 1)
      } else {
        this.screenActive = display
      }
    },
    fold() {
      this.active = -1
    },
    handleClick(i) {
      i === this.active ? (this.active = -1) : (this.active = i)
    },
    changeTimeOrder(index) {
      let lis = this.lis[0]
      lis.activeOptions = index
      lis.selectedTitle = lis.options[index].title
      this.active = -1
      this.$emit('changeOrders', this.all())
    },
    changeCity(city) {
      this.currentCity = city
      this.active = -1
      this.lis[2].selectedTitle = city.name
      this.$emit('changeOrders', this.all())
    },
    changeFish(fish) {
      this.currentFish = fish
      this.active = -1
      this.lis[1].selectedTitle = fish.name
      this.$emit('changeOrders', this.all())
    },
    showLoading() {
      this.loading = 1
    },
    stopLoading() {
      this.loading = 0
    },
    all() {
      return {
        order: this.lis[0].activeOptions+1,
        kind_id: this.currentFish.id,
        city: this.currentCity.id
      }
    }
  },
  watch: {
    active(value) {
      if (value != this.active) {
        this.spread = 1
      }
      switch (value) {
        case 0:
          this.currentOptions = this.lis[0].options
          this.type = 0
          this.spread = 1
          break
        case 1:
          this.currentOptions = []
          this.type = 1
          this.spread = 1
          break
        case 2:
          this.currentOptions = []
          this.type = 2
          this.spread = 1
          break
        case 3:
          this.currentOptions = this.lis[3].options
          this.type = 3
          this.spread = 1
          break
        default:
          this.currentOptions = []
          this.type = -1
          this.spread = 0
          break
      }
    },
    spread(spread) {
      if (spread === 0) {
        // createScreen()
        this.toggleScreen(0)
      } else {
        this.toggleScreen(1)
      }
    }
  },
  components: { Spinner, CitysSelector, FishesSelector }
}
</script>

<style lang="scss">
@import "../../styles/index.scss";

#mt_selector {
  position: fixed;
  color: $primary-font-color;
  z-index: 15;
  top:0;
  left: 0;
  right: 0;

  & > ul {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    z-index: 15;

    & > li {
      position: relative;
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #f9f9f9;
      border-bottom: 1px solid $border-color;

      & > span {
        &::after {
          position: absolute;
          content: "";
          border: 6px solid #ccc;
          border-color: #ccc transparent transparent;
          top: 17px;
          width: 0;
          height: 0;
          margin-left: 4px;
          transition: all 0.1s ease;
        }
      }

      & > .active {
        &::after {
          transform: rotate(180deg);
          top: 11px;
        }
      }
    }
  }

  .mt-s-content {
    font-size: 14px;
    .mt-s-normal,
    .mt-s-fishes,
    .mt-s-address {
      position: absolute;
      z-index: 15;
      background: #fff;
    }

    .active {
      color: $accent-color-light !important;
    }

    .mt-s-normal {
      text-align: center;
      width: 100%;
      height: 0;
      transition: all 2s ease-in-out;

      & > li {
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: $grey-font-color;
        border-bottom: 1px solid $border-color;
      }
    }

    .mt-s-fishes,
    .mt-s-address {
      display: flex;
      width: 100%;
      flex-direction: row;

      & > ul {
        position: relative;
        max-height: 50vh;
        overflow-y: scroll;

        & > li {
          height: 40px;
          line-height: 40px;
          padding-left: 20px;
          // border-bottom: 1px solid $border-color;

          &::before {
            @include border;
          }
        }

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }

    .mt-s-fishes {
      & > .mt-s-kinds {
        flex: 3;
      }

      & > .mt-s-species {
        flex: 7;
        background-color: #f0f0f0;
      }
    }

    .mt-s-screen {
      visibility: hidden;
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9;
      transition: all 0.2s;

      &.active {
        visibility: visible;
        opacity: 100;
        transition: all 0.2s;
      }
    }
  }

  .mt-s-loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;

    .mt-s-spinner {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -14px;
      margin-top: -14px;
    }
  }
}
</style>
